// main.js 写太多内容容易混乱，每个功能单独写一个文件分开管理
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/global.less'
import '@/elementUI/index' // 让elementUI注册的代码参与打包，才能在页面上运行并注册组件
import vueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import dayjs from 'dayjs'  

// 全局注册富文本编辑器
Vue.use(vueQuillEditor)
Vue.config.productionTip = false
// 给vue的原型对象上添加formatDate属性，格式化时间，任意的组件可以直接使用$formatDate
Vue.prototype.$formatDate=(dataObj)=>{
  // 借助dayjs内置的方法把日期对象格式成指定的格式，并把格式化好的字符串返回到调用处
  return dayjs(dataObj).format('YYYY-MM-DD HH:mm:ss')
}
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')


// 后端返回图片地址的经验：
// 为何后端返回的图片地址是半截的？
// 原因：因为我们在前端提交的图片，后端将其保存在了服务器上，因为服务器的域名可能来回变化所以数据库的地址只有相对路径
// 要求:前端请求此图片时,后端告诉你图片文件真身所在的服务器域名,前端自己进行拼接前缀


// 积累
// 组件在创建时,会用data里的默认值,让template里的标签先渲染一次
// 你的网络请求数据回来,data里变量发生了变化,会让template里使用此变量的地方再次渲染
// 这样会出现一个小问题：第一次渲染的时候无值可能导致一些报错，但是效果还是出来了
// 解决1：v-if先不让template里会报错的那个代码先屏蔽执行
// 解决2：可以先给那个对象一个空字符串，别让他报错就行



// 打包相关问题：：打开index.html，出现了404错误
// 原因
// 默认打包，index.html引入其他打包的文件使用的是绝对地址，
// 开发环境地址是以/开头的（要找到当前index.html打开时所在的服务器的根地址（根文件夹））
// 暂时解决：
// 就得确保你的vscode+liserver插件打开时，vscode根目录直接是dist文件夹，
// 说白了就是使用vscode直接打开dist文件夹再去运行index.html文件
// 你如果把dist文件夹交给后台运维工程师部署到服务器上，dist下内容就得在服务骑根目录上才行
//实际工作中： 
// 但是服务器一般会有多个项目，不会让你用根目录直接放一个项目
// 最终解决：
// webpack让你写一个配置项publicPath（控制index.html引入其他资源前缀地址）
// publicPath：默认值'/'确保开发环境下，是这个值，因为开发服务器会把所有打包放在内存里面且会作为服务器的根目录文件夹(绝对地址)
// 生产环境（准备上线了)，这个时候就得使用相对路径，publicPath变为'./'
// 在vue.config.js（脚手架配置文件，webpack配置文件）文件中修改，然后重新打包
